<template>
  <!-- 导航 -->
  <div class="TopNav">
    <van-sticky>
      <div class="top">
        <div>
          <router-link to="/"><van-icon name="wap-home-o" /></router-link>
        </div>
        <div class="title">网易严选</div>
        <div>
          <router-link to="/search"><van-icon name="search" /></router-link>
          <router-link to="/shopcart"><van-icon style="margin-left: 5px" name="shopping-cart-o" /></router-link>
        </div>
      </div>
    </van-sticky>
  </div>
  <div v-if="goodsDetail">
    <!-- 图片切换 -->
    <div class="pic">
      <van-swipe>
        <van-swipe-item v-for="image in goodsDetail.skuImageList " :key="image.id" style="width: 375px;height: 402px;">
          <img :src="image.imgUrl" />
        </van-swipe-item>

        <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
      </van-swipe>
    </div>

    <!-- 红活动价格 -->
    <div class="bannerContent">
      <div class="currentContent">
        <span>特价| 距结束1天8小时</span>
      </div>
      <div class="currentPrice">
        <span>
          <b>￥</b>{{ goodsDetail.price }}
        </span>
        <i>到手
          <b>￥{{ goodsDetail.price }}</b>&gt;
        </i>
      </div>

    </div>

    <!-- 活动内容区 -->
    <div class="main">
      <div class="m-detailBaseInfo">
        <div class="name">{{ goodsDetail.skuName }}<br /></div>

        <!-- 小logo品牌 -->
        <div class="simpleBrandInfo">
          <img src="https://yanxuan-item.nosdn.127.net/c486c016f8435891b4ec8a656052d302.jpg" alt="">
          <span>GOLF</span>
        </div>
        <div class="desc">推荐理由</div>
      </div>


    </div>
  </div>


  <!-- 详细 -->
  <div class="rcmdBanner">
    <!-- 版心 -->
    <div class="banxin">
      <ul>
        <li>
          <div class="key">①</div>
          <div class="recommendReason">耐磨抗撕扯牛津纺面料</div>
        </li>
        <li>
          <div class="key">②</div>
          <div class="recommendReason">防泼水大容量单肩斜挎包通勤必备</div>
        </li>
      </ul>
    </div>
  </div>

  <!-- 包邮 -->
  <div class="freigh">
    <div class="innerBao">
      <p class="commont">邮费：&nbsp;单件包邮 </p>
    </div>
    <div class="icon"><van-icon name="arrow" color=" #7f7f7f" size="14px" /></div>
  </div>

  <div style=" border-top: 10px solid rgb(244, 244, 244)"></div>
  <div class="specSelect">请选择规格数量
    <span><van-icon name="arrow" color=" #7f7f7f" size="14px" /></span>
  </div>
  <div class="specSelect">限制：该商品不可使用优惠券</div>
  <div class="specSelect ">配送：<b>请选择配送地址</b>
    <div class="fuhao">
      <i><van-icon name="arrow" color=" #7f7f7f" size="14px" /></i>
    </div>
  </div>

  <!-- 服务 -->
  <div class="inner">
    <!-- 版心  -->
    <div class="m-serviceEntry">
      <!-- 左边 -->
      <div class="innerLeft">服务: &nbsp;</div>
      <!-- 右边 -->
      <div class="innerRight">
        <ul>
          <li>商家入驻</li>
          <li>七天无忧退换</li>
          <li>不可用券</li>
          <li>不可用礼品卡</li>
          <li>不享受企业折扣</li>
          <li>不享受学生折扣</li>
          <li>国内部分地区不可配送</li>
          <li>不支持增值谁专票</li>
        </ul>
      </div>
      <div class="iconRight"><van-icon name="arrow" color=" #7f7f7f" size="14px" /></div>

    </div>
  </div>

  <div style=" border-top: 10px solid rgb(244, 244, 244)"></div>

  <!-- 轮播图 -->
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item><img
          src="https://yanxuan.nosdn.127.net/hxm/oly-picture/0e49e1ce0825f1890e6183757139e927.jpg?quality=75&type=webp&imageView&thumbnail=750x0"
          alt=""></van-swipe-item>
      <van-swipe-item><img
          src="https://yanxuan.nosdn.127.net/static-union/169088791913d0e6.jpg?quality=75&type=webp&imageView&thumbnail=750x0"
          alt=""></van-swipe-item>

    </van-swipe>
  </div>

  <div style=" border-top: 10px solid rgb(244, 244, 244)"></div>

  <!-- 用户评价 -->
  <header>
    <a class="twoTitle">
      <div class="CommentTitle">用户评价(104)</div>
      <div class="allTitle">
        查看全部
        <van-icon name="arrow" color=" #7f7f7f" size="14px" />
      </div>
    </a>

    <!-- 文字 -->
    <div class="m-comment ">
      <header>
        <div class="left">
          <img
            src="//yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png?type=webp&imageView&quality=75&thumbnail=60x60"
            alt="">
          <span class="name">1****8</span>
        </div>
      </header>
      <div class="extraInfo">
        <span class="time">2023-06-23 13:07:56 &nbsp;<i class="skus">B232829皮粉色</i></span>
      </div>
      <div class="content">
        <div class="inner">不错，大小合适，性价比高，适合夏天使用</div>
      </div>
      <div class="commentPics">
        <ul class="list">
          <li class="item-wrap">
            <div class="item">
              <img
                src="https://yanxuan.nosdn.127.net/2a78ad040e86faee383362c582bf3a1c.jpg?watermark&type=2&gravity=southeast&dissolve=80&font=c2ltZmFuZw==&fontsize=400&fontcolor=d2hpdGU=&text=eXgxNjgwNDI3NDE=|imageView&quality=75&thumbnail=144x0&type=webp"
                alt="">

            </div>

          </li>
          <li class="item-wrap">
            <div class="item">
              <img
                src="https://yanxuan.nosdn.127.net/2a78ad040e86faee383362c582bf3a1c.jpg?watermark&type=2&gravity=southeast&dissolve=80&font=c2ltZmFuZw==&fontsize=400&fontcolor=d2hpdGU=&text=eXgxNjgwNDI3NDE=|imageView&quality=75&thumbnail=144x0&type=webp"
                alt="">

            </div>

          </li>
        </ul>
      </div>
    </div>

    <div style=" border-top: 10px solid rgb(244, 244, 244)"></div>

  </header>

  <!-- logo介绍 -->
  <div class="dt-section">
    <div class="m-brandInfo">
      <div class="left">
        <img src="https://yanxuan-item.nosdn.127.net/c486c016f8435891b4ec8a656052d302.jpg" alt="">
      </div>
      <div class="right">
        <div class="title"> GOLF</div>
        <div class="descc">源自美国时尚风格品牌，一百多年来，凭借创新理念、匠心工艺与设计风格，赢得各地绅士阶层的广泛赞誉</div>
      </div>
    </div>
  </div>

  <!-- 商品参数 -->
  <div class="tab-content">
    <!-- 版心 -->
    <div id="one" class="m-attrCon">
      <div class="attrList">
        <div class="tt">商品参数</div>
        <div class="item">
          <div class="left">适用人群</div>
          <div class="right">
            <div class="con">女士、通用、青少年</div>
          </div>
        </div>
        <div class="item">
          <div class="left">适用人群</div>
          <div class="right">
            <div class="con">女士、通用、青少年</div>
          </div>
        </div>
        <div class="item">
          <div class="left">适用人群</div>
          <div class="right">
            <div class="con">女士、通用、青少年</div>
          </div>
        </div>
        <div class="item">
          <div class="left">适用人群</div>
          <div class="right">
            <div class="con">女士、通用、青少年</div>
          </div>
        </div>
        <div class="item">
          <div class="left">适用人群</div>
          <div class="right">
            <div class="con">女士、通用、青少年</div>
          </div>
        </div>
        <div class="item">
          <div class="left">适用人群</div>
          <div class="right">
            <div class="con">女士、通用、青少年</div>
          </div>
        </div>
        <div class="item">
          <div class="left">适用人群</div>
          <div class="right">
            <div class="con">女士、通用、青少年</div>
          </div>
        </div>
        <div class="item">
          <div class="left">适用人群</div>
          <div class="right">
            <div class="con">女士、通用、青少年</div>
          </div>
        </div>
        <div class="item">
          <div class="left">适用人群</div>
          <div class="right">
            <div class="con">女士、通用、青少年</div>
          </div>
        </div>
        <div class="item">
          <div class="left">适用人群</div>
          <div class="right">
            <div class="con">女士、通用、青少年</div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- 大图 -->
  <div class="m-detailHtml">
    <p><img src="https://yanxuan-item.nosdn.127.net/8ca759846e84a10e957fb5d68d4820e6.jpg?quality=75&type=webp&imageView"
        alt=""></p>
    <p><img src="https://yanxuan-item.nosdn.127.net/b95a5d4ed1f3dc358be6e6f02a2e413e.jpg?quality=75&type=webp&imageView"
        alt=""></p>
    <p><img src="https://yanxuan-item.nosdn.127.net/ed10ddf3e92bc50eefdb2203c07b835e.jpg?quality=75&type=webp&imageView"
        alt=""></p>
    <p><img src="https://yanxuan-item.nosdn.127.net/8632a21d9e058ea7d4b9a56de3840249.jpg?quality=75&type=webp&imageView"
        alt=""></p>
    <p><img src="https://yanxuan-item.nosdn.127.net/6ee771d5099c682b1c9624520ee4c600.jpg?quality=75&type=webp&imageView"
        alt=""></p>
    <p><img src="" alt=""></p>
    <p><img src="" alt=""></p>
    <p><img src="" alt=""></p>
    <p><img src="" alt=""></p>
  </div>

  <!-- 购物导航 -->
  <van-sticky :offset-bottom="0" position="bottom">
    <div class="footer">
      <van-icon name="service-o" />
      <p class="buy" @click="buyNow">立即购买</p>
      <van-cell class="card" is-link title="基础用法" @click="addCard">加入购物车</van-cell>
    </div>
  </van-sticky>
  <van-swipe>
    <img style="width: 100%;"
      src="https://yanxuan.nosdn.127.net/static-union/1682588…pg?quality=75&type=webp&imageView&thumbnail=750x0" />
  </van-swipe>

  <!-- 弹出购物车 -->
  <van-action-sheet class="iconi" v-model:show="show">
    <div class="Content">
      <div class="detail">
        <img :src="skuImageList[0].imgUrl" />
        <div style="margin-left: 50px;">
          <!-- 价格 -->
          <div class="Contentprice">
            <span>价格：</span>
            ￥{{ goodsDetail?.price }}
          </div>

          <!-- 数量 -->
          <div class="number">
            <span>数量：</span>
            <van-stepper v-model="goodsNum" min="1" max="200"  />

          </div>
        </div>
        <!-- 图片 -->
      </div>
    </div>
    <!-- 购物车按钮 -->
    <div class="bottom">
      <!-- 小盒子 -->
      <div class="SA">
        <div class="addCart">
          <van-button type="danger" @click="addCard"  >加入购物车</van-button>
        </div>
      </div>

    </div>
  </van-action-sheet>
</template>

<script setup lang="ts">
import { reqCardDetail, reqAddCart } from '@/api/detail'
import { onMounted, ref } from 'vue';
import { SpuSaleAttrList, SkuInfo, SkuImageList } from '@/types/detail'
import router from '@/router';
const goodsDetail = ref<SkuInfo>()// 商品价格
const spuSaleAttrValueList = ref<SpuSaleAttrList[]>([])// 商品价格

const show = ref(false); // 购物车展示
const skuImageList = ref<SkuImageList[]>([])
const goodsNum = ref(0)  //数量





// 获取轮播图、价格数据
async function getCardDetail() {
  // 手机id数组
  const arr = [20, 13, 12, 11, 1, 17]
  // 随机获取数组中的一个元素
  const randomIndex = Math.floor(Math.random() * arr.length);
  const randomElement = arr[randomIndex];
  const res = await reqCardDetail(randomElement)
  if (res.code === 200) {
    goodsDetail.value = res.data.skuInfo
    spuSaleAttrValueList.value = res.data.spuSaleAttrList
    skuImageList.value = goodsDetail.value.skuImageList
  }

}

// 立即购买按钮
const buyNow = async () => {
  const { id } = goodsDetail.value!
  const res = await reqAddCart(id, 1)
  if (res.code === 200) {
    router.push('/cart')
    
  }
}



// 购物车
const addCard = async () => {
  const { id } = goodsDetail.value!
  if (show.value) {
    const res = await reqAddCart(id, goodsNum.value)

    if (res.code === 200) {
      router.push('/cart')
    }

  } else {
    show.value = true

  }





}


// 选择地址
onMounted(() => {
  getCardDetail()
})

</script>

<script lang="ts">
export default {
  name: 'VDetail'
}
</script>

<style scoped lang="less">
.TopNav {
  .top {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0 12px 0 8px;
    height: 44px;
    line-height: 44px;
    background-color: white;
  }

  .title {
    font-weight: bolder;
    font-size: 20px;
  }
}

p {
  padding: 0;
  margin: 0;
}

body {
  background-color: #f4f4f4;
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.pic .picbox {
  display: flex;
}

.pic img {
  width: 402px;
  height: 402px;
}

.bannerContent {
  width: 375px;
  height: 74px;
  background-color: rgb(250, 30, 50);

  span {
    color: rgb(255, 255, 255);
  }

  .currentContent {
    padding: 10px 15px;
    font-size: 12px;
  }

  .currentPrice {
    padding-left: 15px;
    color: rgb(255, 255, 255);

    span {
      font-size: 28px;
      font-family: Gilroy-bold;
      font-weight: bold;

      b {
        font-size: 18px;
      }
    }

    i {
      list-style: normal;
      font-size: 11px;
      line-height: 23px;
      width: 71px;
      height: 23px;
      color: rgb(250, 30, 50);
      background-color: rgb(255, 255, 255);
      border-radius: 20px 30px;

    }

  }
}

.main {
  width: 375px;
  height: 120px;
  display: flex;
}

.main .m-detailBaseInfo {
  .name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 0 0 2px;
    margin: 20px 0 5px 13px;
  }

  .simpleBrandInfo {
    font-size: 14px;
    color: #7f7f7f;
    margin-bottom: 10px;
  }

  .simpleBrandInfo img {
    width: 12px;
    height: 12px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .desc {
    font-size: 14px;
    margin-left: 13px;
    color: #7f7f7f;
  }
}

.comment {
  font-size: 14px;
  display: flex;

  div {
    line-height: 120px;
    margin-left: 20px;
  }
}

.rcmdBanner {
  width: 375px;
  height: 75px;

  .banxin {
    width: 345px;
    height: 60px;
    background: #fafafa;
    border: 1px solid #e6e6e6;
    margin: auto;

    .key {
      color: #dd1a21;
      font-size: 13px;
      display: inline-block;
      margin-right: 5px;
      font-weight: bold;
    }

    .recommendReason {
      font-size: 12px;
      color: #333333;
      display: inline-block;
    }


    li {
      height: 23px;
      margin-left: 10px;
    }
  }
}

.freigh {
  width: 345px;
  height: 56px;
  margin: auto;
  display: flex;

  .icon {
    width: 25px;
    height: 25px;
    margin-top: 4px;
    margin-left: 174px;
  }

  .innerBao {

    .commont {
      padding: 0 40px 0 0;
      font-size: 14px;
      line-height: 25px;
    }

  }
}

.specSelect {
  width: 375px;
  padding: 0 40px 0 0;
  font-size: 14px;
  height: 52px;
  line-height: 52px;
  margin-left: 14px;
  border-bottom: 2px solid #e6e6e6;

  i {
    font-weight: 100px;
  }

  span {
    margin-left: 215px;
  }

  .fuhao {
    margin-left: -600px;
  }
}

.inner .m-serviceEntry {
  width: 375px;
  height: 95px;
  display: flex;
  padding: 12px 0 4px;

  .iconRight {
    display: block;
    margin: auto;

  }


  .innerLeft {
    font-size: 14px;
    margin-left: 14px;
    display: inline-block;

  }

  .innerRight {
    width: 280px;
    height: 100px;
    font-size: 12px;
    display: inline-block;

    ul {
      li {
        // width: 77px;
        height: 16px;
        margin: 0 20px 8px 0;
        padding: 0 0 0 8px;
        display: inline-block;
        // justify-content: space-around;
        position: relative;
        // float: left;
        list-style-type: disc;

      }

      li:after {
        content: "";
        position: absolute;
        width: 5px;
        height: 5px;
        background-color: #dd1a21;
        border-radius: 100%;
        left: 0;
        top: 5px;
      }
    }
  }
}


.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 25px;
  height: 100px;
  // line-height: 100px;
  text-align: center;
  // background-color: #39a9ed;

  img {
    width: 100%;
    width: 375px;
    height: 101px;
  }
}

header .twoTitle {
  font-size: 14px;
  display: inline-block;
  display: flex;
  justify-content: space-between;
  margin: 0 0 0 18px;
  border-bottom: 2px solid #e6e6e6;

  .CommentTitle {
    width: 316px;
    height: 53px;
    line-height: 53px;
  }

  .allTitle {
    width: 91px;
    height: 53px;
    line-height: 53px;

  }
}

.m-comment {
  .time {
    font-size: 14px;
    color: #7f7f7f;
    margin-top: 10px;
    margin-left: 15px;
  }

  .content .inner {
    width: 370px;
    height: 45px;
    font-size: 15px;
    margin-top: 10px;
    margin-left: 15px;

  }

  .commentPics .list {
    display: flex;
  }

  .commentPics .list .item-wrap {
    padding: 5px 10px 10px 15px;

  }

  .commentPics .list .item-wrap .item img {
    width: 80px;
    height: 90px;
  }
}


.m-comment header {
  width: 386px;
  height: 55px;
  padding: 17px 0 2px 16px;


  .left {
    img {
      width: 35px;
      height: 35px;
      margin-right: 10px;
      border-radius: 50%;
    }


    .name {
      width: 41px;
      height: 23px;
      font-size: 15px;
      vertical-align: text-top;
    }
  }
}

.dt-section {
  background: #fff;
  border-bottom: 0.2rem solid #eee;
}

.m-brandInfo {
  font-size: 15px;
  margin: 20px 20px;
  position: relative;
  background: #fff;
  color: #000;
  padding-bottom: 0.3rem;
  overflow: hidden;
  display: flex;
}

.m-brandInfo .title {
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}

.m-brandInfo .descc {
  font-size: 12px;
}

.m-brandInfo .left img {
  width: 50px;
  height: 50px;
  margin-top: 20px;
  margin-right: 20px;
}


.tab-pane {
  padding: 15px;
}

.tt {
  padding: 20px 0 5px 15px;
  font-size: 14px;
  line-height: 46px;


}

#one {
  width: 345px;
  height: 46px;
}

.attrList .item .con {
  font-size: 12px;
}

.attrList .item {
  font-size: 12px;
  width: 345px;
  height: 32px;
  line-height: 32px;
  border-bottom: 1px dashed #eee;
  margin-left: 15px;
}

.tab-content .m-attrCon .attrList .item:nth-child(1) {
  border-top: 1px dashed #eee;

}


.m-attrCon .attrList .item .left {
  float: left;
  width: 74px;
  position: relative;
  color: #999;
}

.right .con {
  width: 246px;
  height: 22px;
}

.footer {
  width: 100%;
  height: 52px;
  position: fixed;
  bottom: 0;
  font-size: 16 px;
  text-align: center;
  display: flex;
  border: 1px solid #ccc;
  background-color: white;
  z-index: 3000;

  :deep(.van-badge__wrapper) {
    line-height: 52px;
    width: 20%;
    border-right: 1px solid #ccc;
  }

  .card {
    background-color: #dd1a21;
    color: white;
    line-height: 52px;
  }

  p {
    width: 40%;
    line-height: 52px;
  }
}

.iconi {
  width: 100% !important;
}

.Content {
  margin-top: 20px;
  height: 120px;
  display: flex;
  // flex-direction: column;
  width: 375px;
  // padding: 16px 16px 160px;
  font-size: 20px;
  // background-color: antiquewhite;

  // width: 375px;
  .detail {
    display: flex;
    justify-content: space-between;

    .number {
      margin-top: 10px;
    }

  }

  img {
    width: 80px;
    height: 80px;
  }
}


.Content .Smallpic {
  img {
    width: 98px;
    height: 99px;
  }

}

.bottom {

  .SA {
    display: flex;
    justify-content: center;
  }

  .shopping {
    padding-right: 50px;
  }

}



.m-detailHtml img {
  width: 100%;
  vertical-align: top;

}
</style>
